RAPPORT-ATL-4

JSF ?

JSF (JavaServer Faces) est un framework de développement web pour les applications basées sur Java. Il facilite la création d'interfaces utilisateur en offrant des composants prêts à l'emploi pour la création de pages web dynamiques. Il permet également la gestion des états et fournit des mécanismes pour la validation des données et la gestion des erreurs. En utilisant des balises personnalisées, JSF peut encapsuler les composants réutilisables qui peuvent être utilisés sur plusieurs pages et projets.

Architecture JSF ?

L'une des principales avantages de JSF est qu'il est à la fois une norme d'interface utilisateur Web Java et un framework qui suit fermement le modèle de conception Modèle-Vue-Contrôleur (MVC). Cela rend les applications JSF beaucoup plus faciles à gérer car le code de l'interface utilisateur (Vue) est clairement séparé des données et de la logique de l'application (Modèle). Pour préparer le contexte JSF, qui fournit l'accès aux données de l'application aux pages et pour protéger contre l'accès non autorisé ou inapproprié des pages, toutes les interactions de l'utilisateur avec l'application sont gérées par un servlet frontal "Faces" (Contrôleur).

Technologies Utiliser :

SDK : 17

JBOSS : JBoss/WildFly 23.0.2.Final-redhat

JSF : 2.3

Database : 10.11.2-MariaDB

Structure de project

├── mvnw
├── mvnw.cmd
├── pom.xml
└── src
    └── main
        ├── java
        │   └── me
        │       └── yasser
        │           └── atelier4
        │               ├── components
        │               │   ├── StudentBeanEJB.java
        │               │   └── StudentEJB.java
        │               ├── controllers
        │               │   └── StudentController.java
        │               ├── entity
        │               │   └── Student.java
        │               └── manager
        │                   └── EntityManagerHelper.java
        ├── resources
        │   ├── log4j2.properties
        │   └── META-INF
        │       ├── beans.xml
        │       └── persistence.xml
        └── webapp
            ├── index.xhtml
            ├── pages
            ├── static
            │   ├── css
            │   │   └── stylesheet.css
            │   ├── images
            │   │   ├── ensalogo.png
            │   │   └── Success.gif
            │   └── js
            │       └── app.js
            ├── success.xhtml
            └── WEB-INF
                ├── faces-config.xml
                └── web.xml

Creation d’entites Student

La classe Studentest une entité JPA qui représente un étudiant et qui sera mappée à une table de base de données.

Dans la classe Student, les annotations @Entity et @Table indiquent à JPA que cette classe est une entité JPA et qu'elle sera mappée à une table de base de données nommée "student" dans le schéma "ATELIER4". Les différentes propriétés de la classe, annotées avec @Column, représentent les colonnes de la table.

L'annotation @Id indique que la propriété id est la clé primaire de la table. L'annotation @GeneratedValue avec GenerationType.IDENTITY spécifie que la valeur de la clé primaire sera générée automatiquement par la base de données.

L'utilisation des annotations @Data, @AllArgsConstructor, @NoArgsConstructor et @ToString permettent de simplifier le code en évitant de répéter du code boilerplate pour la création de constructeurs, de méthodes getter/setter et de méthodes toString().

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
@Entity
@Table(name="student",schema = "ATELIER4")
public class Student {
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Id
	@Column(name = "id", nullable = false)
	private long id;
	@Basic
	@Column(name = "LastName", nullable = true, length = 20)
	private String LastName;
	@Basic
	@Column(name = "FirstName", nullable = true, length = 20)
	private String FirstName;
	@Basic
	@Column(name = "CIN", nullable = true, length = 20)
	private String CIN;
	@Basic
	@Column(name="BirthDate", nullable = true)
	private Date BirthDate;
	@Basic
	@Column(name="PhoneNumber", nullable = true,length = 255)
	private String PhoneNumber;
	@Basic
	@Column(name="Email", nullable = true,length = 255)
	private String Email;
}

Creationg du bean StudentBeanEJB

La classe StudentBeanEJB est une classe EJB qui implémente l'interface StudentEJB. Elle fournit une implémentation pour les méthodes définies dans cette interface.

L'annotation @Stateless indique que la classe est un EJB Stateless, qui peut être partagé entre plusieurs clients et n'a pas d'état de session.

L'annotation @LocalBean est utilisée pour indiquer que l'EJB n'a pas besoin d'être accédé à distance et peut être accédé localement.

La méthode registerStudent() insère un nouvel objet Student dans la base de données en utilisant l'EntityManager pour persister l'objet. La méthode retourne "success" si l'opération réussit, sinon elle retourne une exception.

La méthode getStudent() utilise l'EntityManager pour rechercher un objet Student dans la base de données en utilisant son identifiant. La méthode retourne l'objet Student correspondant si l'objet est trouvé, sinon elle retourne null.

- Interface

@Remote
public interface StudentEJB {
	// for inserting a student in the database
	String registerStudent(Student std);
	// for getting a student from the database
	Student getStudent(int id);
}

- Main class

@Stateless
@LocalBean
public class StudentBeanEJB implements StudentEJB {
	@PersistenceContext(unitName = "default")
	private static EntityManager em;

	@Override
	public String registerStudent(Student std) {
		em = EntityManagerHelper.getEntityManager();
		System.out.println("! Inserting Data !\n==================================================");
		try{
			em.getTransaction().begin();
			em.persist(std);
			em.getTransaction().commit();
			System.out.println("! Opperation Successful !\n==================================================");
		} catch (Exception e)
		{
//            em.getTransaction().rollback();
			System.out.println("Opperation Unsuccessful");
			System.out.println("Here are some errors that might help\n"+e);
		}
		finally {
			em.close();
		}
		return "success";
	}

	@Override
	public Student getStudent(int id) {
		return em.find(Student.class, id);
	}
}

Creation du Controlleurs

Cette classe StudentController est une classe de contrôleur qui est annotée avec @SessionScoped et @Named. Elle est utilisée pour interagir avec les pages web et les services back-end en utilisant des méthodes définies dans les autres classes de ce projet.

Cette classe possède des champs privés pour stocker les informations de l'étudiant, tels que le nom, le prénom, la date de naissance, le numéro de téléphone et l'adresse e-mail. La méthode DateFormater() utilise la classe DateFormat pour formatter la date de naissance dans le format "dd/MM/yyyy".

La méthode saveStudent() est appelée lorsque l'utilisateur soumet un formulaire de saisie de l'étudiant. Elle crée un nouvel objet Student et définit ses propriétés en utilisant les valeurs des champs de la classe StudentController. Ensuite, elle appelle la méthode registerStudent de la classe StudentBeanEJB pour enregistrer l'étudiant dans la base de données en utilisant JPA. Cette méthode retourne une chaîne de caractères "success" si l'opération est réussie et "failure" si elle échoue.

@SessionScoped
@Named(value = "studentBean")
@Data
@NoArgsConstructor
public class StudentController implements Serializable {
	@EJB
	private StudentBeanEJB stdejb;

	private String LastName;
	private String FirstName;
	private String CIN;
	private Date BirthDate;
	private String PhoneNumber;
	private String Email;

	public String DateFormater() throws ParseException {
		DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
//		Date todayWithZeroTime = formatter.parse(formatter.format(this.BirthDate));
//		System.out.println(formatter.format(this.BirthDate));
//		System.out.println(formatter.parse(formatter.format(this.BirthDate)));
		return formatter.format(this.BirthDate);
	}

	public String saveStudent(){
		Student stds = new Student();
		stds.setFirstName(this.FirstName);
		stds.setLastName(this.LastName);;
		stds.setCIN(this.CIN);
		stds.setBirthDate(this.BirthDate);
		stds.setPhoneNumber(this.PhoneNumber);
		stds.setEmail(this.Email);
		return stdejb.registerStudent(stds);
	}
}

JSF page

<h:form>
        <div class="field-group">
            <h:inputText value="#{studentBean.firstName}" id="firstname" name="firstname" class="input-field"
                         placeholder="First Name" autocomplete="off" required="true"/>
            <h:outputLabel for="firstname" class="input-label">First Name</h:outputLabel>
        </div>
        <div class="field-group">
            <h:inputText value="#{studentBean.lastName}" id="lastname" name="lastname" class="input-field"
                         placeholder="Last Name" autocomplete="off" required="true"/>
            <h:outputLabel for="lastname" class="input-label">Last Name</h:outputLabel>
        </div>
        <div class="field-group">
            <h:inputText value="#{studentBean.email}" id="email" name="email" class="input-field" placeholder="Email"
                         autocomplete="off" required="true"/>
            <h:outputLabel for="email" class="input-label">Email</h:outputLabel>
        </div>
        <div class="field-group">
			....
<h:form>

<h:form> : un composant de formulaire JSF qui permet de regrouper des éléments de formulaire.

<h:inputText> : un composant JSF pour la saisie de texte qui permet aux utilisateurs de saisir du texte dans un champ de formulaire.

value="#{studentBean.firstName}" : une expression EL (Expression Language) qui relie la valeur saisie dans le champ à une propriété firstName de l'objet.

Success Page

<h:body>
	<div class="field-group">
	         <h:inputText value="#{studentBean.firstName}" id="firstname" name="firstname" class="input-field"
	                      placeholder="First Name" autocomplete="off" disabled="true"/>
	         <h:outputLabel for="firstname" class="input-label">First Name</h:outputLabel>
	      </div>
	      <div class="field-group">
	         <h:inputText value="#{studentBean.lastName}" id="lastname" name="lastname" class="input-field"
	                      placeholder="Last Name" autocomplete="off" disabled="true"/>
	         <h:outputLabel for="lastname" class="input-label">Last Name</h:outputLabel>
	      </div>
.....
<h:body/>

Configuration Files

persistence.xml

<?xml version="1.0" encoding="UTF-8"?>
<persistence xmlns="http://java.sun.com/xml/ns/persistence" version="2.0">
  <persistence-unit name="default">

    <class>me.yasser.atelier4.entity.Student</class>
    <properties>
      <property name="javax.persistence.jdbc.url" value="jdbc:mariadb://localhost:3306/ATELIER4?createDatabaseIfNotExist=true"/>
      <property name="javax.persistence.jdbc.driver" value="org.mariadb.jdbc.Driver"/>
      <property name="javax.persistence.jdbc.user" value="abmola"/>
      <property name="javax.persistence.jdbc.password" value="yasser1234"/>
      <property name="javax.persistence.schema-generation.database.action" value="drop-and-create"/>

      <property name="hibernate.dialect" value="org.hibernate.dialect.MariaDB10Dialect"/>
      <property name="show_sql" value="false"/>
      <property name="format_sql" value="true"/>
      <property name="hbm2ddl.auto" value="create-drop"/>
    </properties>
  </persistence-unit>
</persistence>

le fichier persistence.xml et se trouve dans le répertoire src/main/resources/META-INF. C'est un fichier de configuration pour la persistance des données utilisé par l'API Java Persistence (JPA). Il contient des informations sur la manière dont l'application accède aux données stockées dans une base de données relationnelle.

Les éléments importants de ce fichier incluent :

La définition de l'unité de persistance (persistence-unit), qui est un groupe logique d'entités JPA partageant une configuration de persistance commune.

La spécification des classes d'entités JPA à inclure dans l'unité de persistance à l'aide de l'élément <class>.

La définition des propriétés de connexion à la base de données à l'aide des éléments <property>, tels que l'URL de la base de données, le nom d'utilisateur, le mot de passe, le pilote JDBC, etc.

La configuration de Hibernate, un framework d'implémentation de JPA, à l'aide de propriétés telles que le dialecte de la base de données, l'affichage des requêtes SQL, etc.

En somme, ce fichier est utilisé pour configurer la persistance des données dans l'application, y compris la connexion à la base de données, la définition des entités JPA et la configuration d'Hibernate.

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="3.0" xmlns="https://jakarta.ee/xml/ns/jakartaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                                  https://jakarta.ee/xml/ns/jakartaee/web-facesconfig_3_0.xsd">
        <managed-bean>
            <managed-bean-name>studentBean</managed-bean-name>
            <managed-bean-class>me.yasser.atelier4.controllers.StudentController</managed-bean-class>
            <managed-bean-scope>session</managed-bean-scope>
        </managed-bean>
        <navigation-rule>
            <from-view-id>/index.xhtml</from-view-id>
            <navigation-case>
                <from-outcome>Registration Success</from-outcome>
                <to-view-id>/success.xhtml</to-view-id>
            </navigation-case>
        </navigation-rule>
</faces-config>

Il s'agit d'un fichier de configuration XML pour JavaServer Faces (JSF). Il contient des informations sur les managed beans et les règles de navigation utilisées dans une application web JSF.

Les éléments importants de ce fichier incluent :

L'élément faces-config, qui est l'élément racine du fichier et spécifie la version de JSF utilisée.

L'élément managed-bean, qui définit un bean géré par JSF. Il contient des informations telles que le nom de la classe et la portée du bean.

L'élément navigation-rule, qui définit une règle de navigation dans l'application. Il contient des informations telles que la vue de départ et la vue d'arrivée.

En somme, ce fichier est utilisé pour configurer les beans gérés et les règles de navigation dans une application web JSF.

web.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="3.0" xmlns="https://jakarta.ee/xml/ns/jakartaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                                  https://jakarta.ee/xml/ns/jakartaee/web-facesconfig_3_0.xsd">
        <managed-bean>
            <managed-bean-name>studentBean</managed-bean-name>
            <managed-bean-class>me.yasser.atelier4.controllers.StudentController</managed-bean-class>
            <managed-bean-scope>session</managed-bean-scope>
        </managed-bean>
        <navigation-rule>
            <from-view-id>/index.xhtml</from-view-id>
            <navigation-case>
                <from-outcome>Registration Success</from-outcome>
                <to-view-id>/success.xhtml</to-view-id>
            </navigation-case>
        </navigation-rule>
</faces-config>

Il s'agit d'un fichier de configuration XML pour JavaServer Faces (JSF). Il contient des informations sur les managed beans et les règles de navigation utilisées dans une application web JSF.

Les éléments importants de ce fichier incluent :

L'élément faces-config, qui est l'élément racine du fichier et spécifie la version de JSF utilisée.

L'élément managed-bean, qui définit un bean géré par JSF. Il contient des informations telles que le nom de la classe et la portée du bean.

L'élément navigation-rule, qui définit une règle de navigation dans l'application. Il contient des informations telles que la vue de départ et la vue d'arrivée.

En somme, ce fichier est utilisé pour configurer les beans gérés et les règles de navigation dans une application web JSF.

Resultat

Ressources

JAVA DOC : HERE

SOURCE CODE : HERE

Made with Love 🦢

by @NBGamer